var RNFS = require('react-native-fs');
import XLSX from 'xlsx';
import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    ImageBackground,
    Modal,
    Pressable,
    TouchableHighlight,
    Alert,
    ToastAndroid,
    Animated,
    Easing
} from 'react-native';
import Video from 'react-native-video'
import { gradepath } from '../../../utils/path'
import RNPop from '../Home/comments/model'

export default class DealPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: true,//切换答题界面
            currenttime: 3,//倒计时
            pause: true,//控制倒计时结束音效，答题音效
            pause1: true,//答题正确或是错误
            modevisib1: true,//答题弹窗
            modevisib2: false,//结算弹窗
            currentquestion: {},//当前页面渲染的题目
            // currentindex: '',//控制题目几个答案选项选择效果的索引,chooseanswer替代
            currentpageindex: 1,//记录抽选题库的当前题数索引
            newarr: [],//当前抽选的题库数量
            sliceArr: [],//题目所有题库
            chooseanswer: [],//记录当前题目的选择答案,
            currentscore: "",//本次得分
            objitem: "",
            answertime: 20,
            str: '20秒',
            icon: "",
            videoanswer:"",
            submitflag: true,
            scale: 0.2,
            fadeInOpacity: new Animated.Value(0),
            rotation: new Animated.Value(0),
            scale: new Animated.Value(0),

        }

    }
    static navigationOptions = {
        headerShown: false,
        tabBarLabel: '好友',
        tabBarIcon: ({ focused }) => {
            if (focused) {
                return (
                    <Text>这是好友</Text>

                    // <Image style={styles.tabBarIcon} source={require('../../img/fri_sel.png')}/>
                );
            }
            return (
                <Text>这是好友</Text>

                // <Image style={styles.tabBarIcon} source={require('../../img/fri_nor.png')}/>
            );
        },
    };
    componentDidMount() {
        // 关掉debug就可以正常执行，属于rn的isson，因为浏览器单线程，rn多线程
        var that = this
        this.timer = setInterval(
            () => {
                console.log('把一个定时器的引用挂在this上', this.state.currenttime);
                if (this.state.currenttime > 1 && this.state.currenttime < 4) {
                    this.setState({ currenttime: this.state.currenttime - 1 })
                } else {
                    //  等于1的时候就开始改变flag的值切换答题界面
                    this.timer && clearInterval(this.timer);
                    this.setState({ flag: false, pause: false })
                    // 答题倒计时
                    this.anstimer = setInterval(
                        that.inter
                        , 1000
                    )

                }
            },
            1000
        );
        // this.setState({ flag: false, pause: false })
    }
    inter = () => {
        var that = this
        if ( that.state.answertime>0) {
            var count = that.state.answertime - 1
            this.setState({ answertime: count, str: `${count}秒` })

        }else{
            this.anstimer && clearInterval(this.anstimer);
            this.setState({ answertime: 20, str: `20秒` })
            this.checkanswer()

        }
        // var minute = that.showNum(count % 60)
        // var second = that.showNum(parseInt(count / 60) % 60)
        // this.setState({ answertime: count, str: `${second}:${minute}` })
        

    }

    showNum = (num) => {
        if (num < 10) {
            return '0' + num
        }
        return num
    }
    componentWillMount() {
        const { params } = this.props.navigation.state;
        // 读取excel文件的题库
        console.log(params)
        let paths = params.data.exampath//题目路径
        let choosecount = params.count//抽选题目
        RNFS.readFile(paths, 'ascii').then(res => {
            console.log(res)
            const workbook = XLSX.read(res, { type: 'binary' });
            console.log(workbook)
            // 读取到保存的excel新文件进行修改字段操作
            var worksheet = workbook.Sheets[workbook.SheetNames[0]];
            var jsondata = XLSX.utils.sheet_to_json(worksheet);
            const sliceArr = jsondata.slice(3)//切割返回一个新数组8
            // 随机抽特定数量的题choosecount= 5
            const newarr = this.RandomNumBoth(sliceArr, choosecount)
            this.setState({ newarr: newarr, sliceArr: jsondata, currentquestion: newarr[this.state.currentpageindex - 1] })

            console.log(jsondata, newarr, sliceArr, this.state.newarr, this.state.sliceArr)
            // jsondata[1]['姓名'] = "李四修改1次"//实际上就是定义的worbook改掉了
            // let changeworksheet = XLSX.utils.json_to_sheet(jsondata)
            // // 转化为json数据修改excel数据后重新写入工作表
            // workbook.Sheets[workbook.SheetNames[0]] = changeworksheet
            // const wbout = XLSX.write(workbook, { type: 'binary', bookType: "xlsx" });
            // RNFS.writeFile(paths, wbout, 'ascii').then((r) => {/* :) */ }).catch((e) => {/* :( */ });
            // console.log(worksheet, workbook)
        })

    }
    RandomNumBoth(arr, maxNum) {
        // 函数把this.state,slicearr的值用arr变量接收了，所以这里面对arr操作不会影响到state的值
        var numArr = [];
        var arrLength = arr.length;
        for (var i = 0; i < arrLength; i++) {
            var Rand = arr.length;
            //取出随机数 
            var number = Math.floor(Math.random() * arr.length); //生成随机数num是存在的某个索引值
            console.log(number, Math.random())
            numArr.push(arr[number]); //往新建的数组里面传入数值
            arr.splice(number, 1); //传入一个删除一个原数组的对应索引，改变原数组arr,避免重复，被删除的放在新的数组，
            if (arr.length <= arrLength - maxNum) {
                return numArr;
            }
        }
    }
    // 记录当前这道题目的选择答案
    chooseclick = (index) => {
        // 如果是单选数组只能一个索引答案值，如果的多选可追加答案，如果选中了就删除答案，背景根据选项卡取的值【】
        var arr
        if (this.state.chooseanswer.indexOf(index + 1) !== -1) {
            // 已经存在的答案不追加反而删
            var arr = this.state.chooseanswer
            arr.splice(this.state.chooseanswer.indexOf(index + 1), 1)
            this.setState({ chooseanswer: arr })
            return;
        }
        if (this.state.currentquestion.topic_type !== 2) {//单选，只有一个值

            arr = [index + 1]
            this.setState({ chooseanswer: arr })
        } else {//多选
            // console.log(this.state.chooseanswer)
            arr = this.state.chooseanswer
            arr.push(index + 1)
            this.setState({ chooseanswer: arr })
        }


        // console.log(arr)
    }
    current(currentquestion) {
        if (currentquestion.topic_type == 1) {
            currentquestion.topic_types = '单选'
        } else if (currentquestion.topic_type == 2) {
            currentquestion.topic_types = '多选'
        } else if (currentquestion.topic_type == 3) {
            currentquestion.topic_types = '判断'
        }
        var chooses = [currentquestion.content_1, currentquestion.content_2, currentquestion.content_3 && currentquestion.content_3, currentquestion.content_4 && currentquestion.content_4, currentquestion.content_5 && currentquestion.content_5, currentquestion.content_6 && currentquestion.content_6]
        var a = chooses.filter(Boolean)
        // console.log(a)
        currentquestion.chooses = a
        return currentquestion
    }

    checkanswer() {
        // 显示正确图标或者错误图标，只有点击确定才确定currentquestion最终答案可以评判流程有一个判断是否进入评判流程的判断值submitflag,同时停掉计时器重置倒计时时间在nextquestion方法里下一题在重启计时器
        let icon;
        let videoanswer
        let zoomVal = this.state.scale
        let imgDom = this.refs.imgDom
        // 如果单选只有一个数字有时参考单选答案有时数字有时字符串进行统一
        this.anstimer && clearInterval(this.anstimer);  
        this.setState({ answertime: 20, str: `20秒` })
        let item = this.state.currentquestion
        if (!isNaN(item.answer)) {
            item['answer'] = `${item['answer']}`
        }
        this.isArrayEqual(item['answer'], this.state.chooseanswer) ? icon = require('../../../../assets/imgs/a2/right1.png') : icon = require('../../../../assets/imgs/a2/error1.png')    
        this.isArrayEqual(item['answer'], this.state.chooseanswer) ? videoanswer = require('../../../../assets/imgs/Victory.mp3') : videoanswer = require('../../../../assets/imgs/answererror.mp3')    
        this.setState({ submitflag: false, icon: icon,videoanswer:videoanswer,pause1: false  })
        // 倒计时五秒进入下一题调用nextquestion 函数,这个过程要显示正确与否的图片，正确错误的音效    
        var timing = Animated.timing;
        //  组合动画 parallel（同时执行）、sequence（顺序执行）、stagger（错峰，其实就是插入了delay的parrllel）和delay（延迟）
            Animated.sequence([
                Animated.parallel(['fadeInOpacity', 'scale'].map(property => {
                    return timing(this.state[property], {
                    toValue: 1,
                    duration: 1000,
                    easing: Easing.ease,
                    useNativeDriver:true
                });
            })),          
            Animated.delay(100), // 延迟400ms，配合sequence使用
            Animated.parallel(['fadeInOpacity', 'scale'].map(property => {
                return timing(this.state[property], {
                toValue: 0,
                duration: 1000,
                easing: Easing.ease,
                useNativeDriver:true

            });
        }))
            ]).start()

        this.nextanswertimer = setTimeout(() => {
            // 评判结束可以自动进入下一题点击确定也可进入下一题
            this.nextquestion()

        }, 3000)


    }
    nextquestion() {
        const { params } = this.props.navigation.state;
        this.setState({ submitflag: true })
        let rightcount = 0
        this.nextanswertimer && clearTimeout(this.nextanswertimer);  

        // 判断当前有没有选择答案，不能选择答案为空
        // if (this.state.chooseanswer.length == 0) {
        //     let rnPop = this.refs.rnPop
        //     rnPop.show({
        //         content: "当前题目没选择答案", btns: [
        //             {
        //                 text: '确定',
        //                 style: { color: '#30a4fc' },
        //                 onPress() {
        //                     rnPop.close();
        //                 }
        //             }

        //         ]
        //     })
        //     return;
        // }
        // 保存当前答案后再进行下一题
        var newarr = this.state.newarr
        var newobj = newarr[this.state.currentpageindex - 1]
        newobj['chooseanswer'] = this.state.chooseanswer
        console.log(newobj)
        newarr[this.state.currentpageindex - 1] = newobj
        this.setState({ newarr: newarr,pause1: true })
        console.log(this.state.newarr)//数组属性改变了属性直接变了，更单个变量变值不一样
        if (this.state.currentpageindex < this.state.newarr.length) {
            // 保存答案到当前题库的对应某题的属性上面
            this.setState({ currentpageindex: this.state.currentpageindex + 1, currentquestion: this.state.newarr[this.state.currentpageindex + 1 - 1], chooseanswer: [] })
            console.log(this.state.currentpageindex)//虽然操作一次界面更新变2了但是打印的时候是1，如果现在要用这个值还是得不能直接用手动加在用
            this.anstimer = setInterval(
                this.inter
                , 1000
            )
        } else {
            // 最后一题算分提交答案显示结算弹窗
            this.anstimer && clearInterval(this.anstimer);  
            console.log(2323)
            // 出现胜利的声音
            this.setState({ modevisib1: false, modevisib2: true})

            this.state.newarr.map(item => {
                // 如果单选只有一个数字有时参考单选答案有时数字有时字符串进行统一                   
                if (!isNaN(item.answer)) {
                    item['answer'] = `${item['answer']}`
                }
                this.isArrayEqual(item['answer'], item['chooseanswer']) ? rightcount += 1 : ""
            })

            var score = 100 / params.count * rightcount
            this.setState({ currentscore: score })
            // 读取答题表开始存储数据
            console.log(rightcount, score)//对的题数数量和分数
           

            RNFS.readFile(gradepath, 'utf8').then(res => {
                var arr = JSON.parse(res)
                // 更新表字段【成绩表id，题库id，题库平均分数，人数】看当前成绩表题库的id在表里存在不存在，不存在说明第一次存，自定义答题人数为1追加数据。存在说明这答题表已经有人答题，在原来的答题人数上面加1，修改记录，平均分数结合当前答题分数重新计算平均分数
                let index1
                console.log(arr, params)

                var flagvalue = arr.find((item, index) => {
                    index1 = index
                    console.log(item, params)
                    return item.examid == params.data.id
                })
                console.log(flagvalue)
                    if (flagvalue) {
                        var obj = arr[index1]
                        if (score>50) {
                            var m = (obj.allscore + score) / (obj.countperson + 1)
                            arr[index1] = { ...obj, equalscore: m.toFixed(2), countperson:obj.countperson + 1, allscore: obj.allscore + score }
                        }
                        this.setState({ objitem: arr[index1] })
                        console.log(arr)
    
                    } else {
                        //   没找到追加数据
                        var a = arr.length == 0 ? 1 : arr[arr.length - 1].id + 1
                        if (score>50) {
                            var obj = { id: a, examid: params.data.id, equalscore: score, countperson: 1, allscore: score }
                        }else{
                            var obj = { id: a, examid: params.data.id, equalscore: 0, countperson: 0, allscore: 0 }

                        }
                        this.setState({ objitem: obj })
                        arr.push(obj)
                }
               
                console.log(arr)
                RNFS.writeFile(gradepath, JSON.stringify(arr), 'utf8')
                    .then((success) => {
                        console.log('FILE WRITTEN!');
                        // 不用提示
                        // Alert.alert('提示', '成功保存当前答题卡最新成绩', [
                        //     { text: '确定', onPress: () => console.log('OK Pressed') },

                        // ]);
                    })
                    .catch((err) => {
                        console.log(err.message);
                    })


            }).catch(err => {
                console.log(err)
            })
        }

    }
    isArrayEqual(str, arr2) {
        // str='1,2
        var arr1 = str.split(",")//标准答案
        // arr1和arr2匹配是不是值完全相同
        if (arr1.length === arr2.length) {
            // 循环选择答案arr2的每个元素【number】。如果每个是否能在标准答案arr1【有时数字有时number】找得到
            var a = arr2.every(item => {
                // console.log(item, arr1.indexOf(`${item}`) > -1)
                return arr1.indexOf(`${item}`) > -1

            })
            // console.log(a)
            return a
        } else {
            return false
        }

    }
    out() {
        // 退出弹出弹窗提示，暂停计时，取消继续计时，确认关闭回到主界面
        clearInterval(this.anstimer)
        let rnPop = this.refs.rnPop
        rnPop.show({
            content: `还有${this.state.newarr.length - this.state.currentpageindex}题结束，现在要结束吗`, btns: [
                {
                    text: '确定', onPress: () => {
                        this.props.navigation.replace('Home', { user: 'Sybil' })
                    }
                },
                {
                    text: '取消', onPress: () => {
                        this.anstimer = setInterval(
                            this.inter
                            , 1000
                        )
                    }
                },

            ]
        })
        // Alert.alert('', `还有${this.state.newarr.length-this.state.currentpageindex}题结束，现在要结束吗`, [
        //     { text: '确定', onPress: () =>{
        //         this.props.navigation.replace('Home', { user: 'Sybil' })
        //     }},
        //     { text: '取消', onPress: () => {
        //         this.anstimer=setInterval(
        //             this.inter
        //           ,1000
        //         )
        //     } },

        // ]);

    }
    gohome() {
        this.setState({ modevisib2: false })
        this.props.navigation.replace('Home', { user: 'Sybil' })

    }
    jiesuan(score) {
        var str;
        if (score < 60) {
            str = require('../../../../assets/imgs/a3/try.png')
        } else if (score >= 80) {
            str = require('../../../../assets/imgs/a3/grate.png')
        } else {
            str = require('../../../../assets/imgs/a3/good.png')
        }
        return str
    }
    componentWillUnmount() {
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.nextanswertimer && clearTimeout(this.nextanswertimer);  
    }
    render() {
        const { currentquestion, currentpageindex } = this.state;
        const { params } = this.props.navigation.state;
        let count = params.count
        let data = params.data
        var current = this.current(currentquestion)
        let str = this.jiesuan(this.state.currentscore)
        // console.log(params, currentquestion, current, this.state.chooseanswer)      
        return (

            <View style={styles.container}>
                <RNPop ref="rnPop" />

                <Video
                    source={require('../../../../assets/imgs/a.mp3')}
                    ref='video'
                    volume={1.0}
                    paused={this.state.pause}
                    // onProgress={(e) => this.onProgress(e)}
                    // onLoad={(e) => this.onLoad(e)}
                    // onEnd={() => this.onEnd()}
                    // onError = { (e) => this.onErr(e) }
                    playInBackground={true}
                    playWhenInactive={true}
                    ignoreSilentSwitch={"ignore"}
                />
                <Video
                    source={this.state.videoanswer}
                    ref='video'
                    volume={1.0}
                    paused={this.state.pause1}
                    // onProgress={(e) => this.onProgress(e)}
                    // onLoad={(e) => this.onLoad(e)}
                    // onEnd={() => this.onEnd()}
                    // onError = { (e) => this.onErr(e) }
                    playInBackground={true}
                    playWhenInactive={true}
                    ignoreSilentSwitch={"ignore"}
                />
                <ImageBackground
                    style={{ height: '100%', width: '100%', borderWidth: 0 }}
                    source={require('../../../../assets/imgs/a2/bigbackground.png')}
                    imageStyle={{ resizeMode: 'cover' }}

                >
                    {
                        this.state.flag ? (
                            <View style={styles.box1}>
                                <View><Text style={{ color: '#fff', textAlign: "center", marginTop: 60, fontSize: 26, fontWeight: 'bold' }}>{data.title}</Text></View>
                                <View><Text style={{ color: '#fff', textAlign: "center", marginTop: 30 }}>学习测评即将开始</Text></View>
                                <View><Text style={{ color: '#fff', textAlign: "center" }}>每题{100 / count}分，共{count}题，共100分</Text></View>
                                <View><Text style={{ color: '#fff', textAlign: "center", marginTop: 40, fontSize: 100 }}>{this.state.currenttime}</Text></View>

                            </View>
                        ) : (
                                <View style={styles.box2}>
                                    <Modal
                                        animationType="slide"
                                        transparent={true}
                                        // 继承属性和方法
                                        visible={this.state.modevisib1}
                                        onRequestClose={() => {
                                            Alert.alert("Modal has been closed.");
                                        }}

                                    >
                                        <View style={{
                                            flex: 1,
                                            justifyContent: "center",
                                            alignItems: "center"
                                        }}>
                                            <ImageBackground
                                                style={{ height: '100%', width: '100%', borderWidth: 0}}
                                                imageStyle={{ resizeMode: 'stretch' }}
                                                source={require('../../../../assets/imgs/a2/background.png')}
                                            >
                                                <Text style={styles.circle}>{this.state.str}</Text>
                                                <Animated.Text style={styles.circle}
                                                >{this.state.str}</Animated.Text>
                                                {/* 因为使用了绝对定位absolute，导致点击事件不灵敏，不发生反应 */}
                                                <TouchableHighlight style={{ position: "absolute", zIndex: 100, right: 30, top: 15 }} onPress={() => { this.out() }} underlayColor='#9CCDE3'><Image
                                                    style={{ width: 40, height: 40 }}
                                                    source={require('../../../../assets/imgs/a2/close.png')}

                                                /></TouchableHighlight >

                                                <View style={styles.title}><Text style={{ color: "#fff", fontSize: 25, fontWeight: "bold",position:"relative",top:-5 }}>学习测评 <Text style={{ color: "#DB9C26" }}>{currentpageindex}</Text>/{count}</Text></View>
                                                <View style={styles.cotain}>
                                                    <View style={styles.answertitle}>
                                                        <Text style={{ color: "#fff", fontSize: 15 }}>{currentpageindex},（{current.topic_types}）{current.content}</Text>
                                                    </View>
                                                    <View style={styles.answerchoose}></View>
                                                    {

                                                        current.chooses.map((item, index) => {
                                                            let a;
                                                            switch (index + 1) {
                                                                case 1:
                                                                    a = "A"
                                                                    break;
                                                                case 2:
                                                                    a = "B"
                                                                    break;
                                                                case 3:
                                                                    a = "C"
                                                                    break;
                                                                case 4:
                                                                    a = "D"
                                                                    break;
                                                                case 5:
                                                                    a = "E"
                                                                    break;
                                                                case 6:
                                                                    a = "F"
                                                                    break;

                                                            }

                                                            // console.log(this.state.currentindex, index, this.state.chooseanswer)
                                                            // 不管多选单选，答案都在数组里，如果每个选项循环的时候去选择答案数组能不能找到，找到就说明选中了，切换选中背景样式和图片
                                                            return (

                                                                <Pressable style={[styles.pressclick]} key={index} onPress={() => {
                                                                    // 进行一个选中操作赋值给数组
                                                                    this.chooseclick(index)
                                                                }}
                                                                    disabled={!this.state.submitflag}
                                                                >
                                                                     <ImageBackground
                                                                        style={{width:'100%',height:"100%",flexDirection: "row", justifyContent: "flex-start", alignItems: 'center',top: 0, left: 0,backgroundColor:"#5DB7D2",borderRadius:4}}
                                                                        imageStyle={{ resizeMode: 'stretch'}}
                                                                        defaultSource={require('../../../../assets/imgs/a2/choose.png')}
                                                                        source={this.state.chooseanswer.indexOf(index + 1) !== -1 ? require('../../../../assets/imgs/a2/choose.png') : require('../../../../assets/imgs/a2/normal.png')}
                                                                    >
                                                                        <ImageBackground
                                                                        style={{ width: 40, height: '105%', position: 'relative', top: 1, left: -1, alignItems: "center" }}
                                                                        imageStyle={{ resizeMode: 'stretch' }}
                                                                        source={this.state.chooseanswer.indexOf(index + 1) !== -1 ? require('../../../../assets/imgs/a2/xzhong.png') : require('../../../../assets/imgs/a2/xxiang.png')}
                                                                    >
                                                                        <Text style={{ color: "#fff", fontSize: 25 }} >{
                                                                            a
                                                                        }</Text>
                                                                    </ImageBackground>
                                                                   

                                                                    <Text style={{ color: "#fff", fontSize: 15, marginLeft: 10 }} >{item}</Text>
                                                                    {/* 逻辑是只选择了操作就显示正确或者错误图片 ，如果选中的选项中正确答案包含哪一个就显示正确图标，否则错误图标*/}
                                                                    {/*  this.state.chooseanswer.indexOf(index + 1) !== -1 (<Image
                                                                        style={{ width: 30, height: 30, position: 'absolute', right: 5 }}
                                                                        source={  `${this.state.currentquestion.answer}`.indexOf(`${index+1}`) !== -1 ?
                                                                     require('../../../../assets/imgs/a2/right.png') : require('../../../../assets/imgs/a2/error.png')}

                                                                    />) : (null) */}
                                                                    {/* 这个逻辑是评判状态才标记正确答案图标 */}
                                                                    {
                                                                        !this.state.submitflag ? (<Image
                                                                            style={{ width: 30, height: 30, position: 'absolute', right: 5 }}
                                                                            source={`${this.state.currentquestion.answer}`.indexOf(`${index + 1}`) !== -1 ?
                                                                                require('../../../../assets/imgs/a2/right.png') : null}

                                                                        />) : (null)
                                                                    }
                                                                                                                                        </ImageBackground>

                                                                </Pressable>

                                                            )
                                                        })
                                                    }

                                                    {
                                                        !this.state.submitflag ? (
                                                        <Animated.Image
                                                        style={{ position: 'absolute',right: 100, top: 40, opacity: this.state.fadeInOpacity,
                                                        transform: [{
                                                            rotateZ: this.state.rotation.interpolate({
                                                                inputRange: [0,1],//interpolate是inputRange对应值的范围的映射
                                                                outputRange: ['0deg', '360deg']
                                                            })
                                                       },
                                                       {
                                                        scale: this.state.scale.interpolate({
                                                            inputRange: [0,1],
                                                            outputRange: [0, 0.5]
                                                        })   
                                                       }
                                                    ] }}
                                                        source={this.state.icon}
                                                        imageStyle={{ resizeMode: 'contain' }}
                                                        ref='imgDom'
                                                     >
                                                   </Animated.Image>
                                                   ) : (null)
                                                    }
                                                </View>
                                                <View style={styles.btn}>
                                                    {
                                                        this.state.submitflag ? (
                                                            <TouchableHighlight style={{ backgroundColor: "#0B8DBD", width: 60, justifyContent: "center", alignItems: "center", borderRadius: 2, width: 120, height: 30, borderWidth: 1, borderColor: "#00C0DB" }}
                                                                onPress={() => { this.checkanswer() }}
                                                                underlayColor='#9CCDE3'
                                                            >
                                                                  <ImageBackground
                                                                        style={{ width: '100%', height: '100%', position: 'relative', top: 0, left: 0, alignItems: "center",justifyContent:"center" }}
                                                                        imageStyle={{ resizeMode: 'stretch' }}
                                                                        source={require('../../../../assets/imgs/a2/queding.png')}
                                                                    >
                                                                   <Text style={{ color: "#fff", fontSize: 15 }} >提交</Text>
                                                                    </ImageBackground>
                                                               
                                                            </TouchableHighlight>
                                                        ) : (
                                                                <TouchableHighlight style={{ backgroundColor: "#0B8DBD", width: 60, justifyContent: "center", alignItems: "center", borderRadius: 2, width: 120, height: 30, borderWidth: 1, borderColor: "#00C0DB" }}
                                                                    onPress={() => { this.nextquestion() }}
                                                                    underlayColor='#9CCDE3'
                                                                >
                                                                     <ImageBackground
                                                                        style={{ width: '100%', height: '100%', position: 'relative', top: 0, left: 0, alignItems: "center",justifyContent:"center" }}
                                                                        imageStyle={{ resizeMode: 'stretch' }}
                                                                        source={require('../../../../assets/imgs/a2/queding.png')}
                                                                    >
                                                                        <Text style={{ color: "#fff", fontSize: 15 }} >{this.state.currentpageindex < this.state.newarr.length ? '确定' : "提交"}</Text>
                                                                    </ImageBackground>
                                                                   
                                                                </TouchableHighlight>
                                                            )
                                                    }

                                                </View>

                                            </ImageBackground>
                                        </View>
                                    </Modal>
                                    <Modal
                                        animationType="slide"
                                        transparent={true}
                                        // 继承属性和方法
                                        visible={this.state.modevisib2}
                                        onRequestClose={() => {
                                            Alert.alert("Modal has been closed.");
                                        }}
                                    >
                                        <ImageBackground
                                            style={{ height: '100%', width: '100%', borderWidth: 0 }}
                                            imageStyle={{ resizeMode: 'contain' }}
                                            source={require('../../../../assets/imgs/a2/background.png')}
                                        >
                                            <View style={styles.title}><Text style={{ color: "#fff", fontSize: 25, fontWeight: "bold" }}>成绩结算 </Text></View>
                                            <View style={styles.cotain}>
                                                <Text style={{ color: "#fff", fontSize: 80, marginTop: '2%', fontWeight: 'bold' }}>得分：{this.state.currentscore}</Text>

                                                <Image
                                                    style={{ width: 100, height: 100, position: 'absolute', top: 80, left: '65%' }}
                                                    source={str}
                                                    imageStyle={{ resizeMode: 'contain' }}

                                                />
                                                 <Text style={{ color: "#fff", marginTop: '6%' }}>已经{this.state.objitem.countperson}位同学完成 “{data.title}”的学习测评，平均得分:{this.state.objitem.equalscore}</Text>
                                                
                                                <Pressable style={{ backgroundColor: "#0B8DBD", width: 60, justifyContent: "center", alignItems: "center", marginTop: '5%', borderRadius: 2, width: 120, height: 30, borderWidth: 1, borderColor: "#00C0DB" }}
                                                    onPress={() => { this.gohome() }}
                                                >
                                                       <ImageBackground
                                                                        style={{ width: '100%', height: '100%', position: 'relative', top: 0, left: 0, alignItems: "center",justifyContent:"center" }}
                                                                        imageStyle={{ resizeMode: 'stretch' }}
                                                                        source={require('../../../../assets/imgs/a2/queding.png')}
                                                                    >
                                                    <Text style={{ color: "#fff", fontSize: 15, marginBottom: 2 }} >关闭</Text>
                                                    </ImageBackground>
                                                </Pressable>
                                            </View>

                                        </ImageBackground>

                                    </Modal>

                                </View>
                            )
                    }



                </ImageBackground>
            </View>
        );
    }
}
const styles = StyleSheet.create({

    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100%'
    },
    box1: {
        // position:'absolute'
    },
    circle: {
        width: 40,
        height: 40,
        position: "absolute",
        left: 35,
        top: 20,
        textAlign: "center",
        lineHeight: 40,
        color: "#FAA003",
        fontWeight: "bold",
        borderRadius: 20,
        borderWidth: 5,
        borderColor: "#fff",
        fontSize: 10

    },
    box2: {
        width: '100%',
        height: "100%",
        // backgroundColor: "red",
        justifyContent: "center",
        alignItems: 'center'

    },
    title: {
        marginTop: 25,
        textAlign: "center",
        alignItems: "center",
        // backgroundColor:"#fff"

    },
    answertitle:{
      width:"90%",
    //   backgroundColor:'#fff'
    },
    pressclick: {  width: '60%', flexDirection: "row", justifyContent: "flex-start", alignItems: 'center', marginTop: '2%',  height: '12%',position:"relative" },
    cotain: {
        alignItems: "center",
        marginTop: '2%',
        height: '60%'

    },
    a: {




    },
    b: {

    },
    btn: {
        alignItems: "center",
        // marginBottom: '2%',
    },
    tabBarIcon: {
        width: 21,
        height: 21,
    }
});